<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹框-阻止冒泡</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function () {
			// body...
			$('#btn').click(function() {
				/* Act on the event */
				$('#pop').show();
				return false;
			});
			$('#shout').click(function() {
				/* Act on the event */
				$('#pop').hide();

			});
			$('#mask1').click(function(event) {

				$('#pop').hide();
			});
		})

	</script>
	<style type="text/css">
		.pop_con{
			display: none;
		}

		.pop{
			width: 300px;
			height: 300px;
			background-color: #fff;
			border: 1px solid #000;
			position: fixed;
			left: 50%;
			top: 50%;
			margin: -150px 0 0 -150px;
			z-index: 9999;
		}
		.mask{
			/*遮照层样式*/
			position: fixed;
			width: 100%;
			height: 100%;
			background-color: #000;
			left: 0;
			top: 0;
			opacity: 0.3;
			filter: alpha(opacity=30);
			z-index: 9990;
		}
	</style>
</head>
<body>
	<h1>首页</h1>
	<p>内容</p>
	<input type="button" name="" value="弹出" id="btn">
	<div class="pop_con" id="pop">
		<div class="pop">
			<h3>提示信息!</h3>
			<a href="" id="shout">关闭</a>
			<input type="" name="">
		</div>
		<div class="mask" id="mask1"></div>

	</div>
</body>
</html>